<!--{template common/container/pc/header_start}-->
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/template/pc/assets/css/header.css?{VERHASH}"/>
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/template/pc/assets/css/details.css?{VERHASH}"/>
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/template/pc/assets/css/xuanzhuan/index.css?{VERHASH}"/>
<script type="text/javascript" src="static/vue_components/collectdialog/index.js?{VERHASH}"></script>
<script>
	function CopyTxt(item,text){
		var input = document.createElement('input'); input.setAttribute('id', 'copyInput');
		input.setAttribute('value', text);
		document.getElementsByTagName('body')[0].appendChild(input);
		document.getElementById('copyInput').select();
		document.execCommand('copy');
		item.$message({
		  message: '成功复制到剪切板',
		  type: 'success'
		});
		document.getElementById('copyInput').remove();
	};
</script>
<style>
	body{
		background: var(--el-bg-color);
	}
</style>
<!--{template common/container/pc/header_end}-->
<div id="dzzoffice">
	<el-container>
		<el-header class="page-header" height="70px" style="padding: 0;z-index: 10;">
			<!--{template pc/components/header}-->
		</el-header>
		<el-main>
			<div class="page-content" v-loading="HtmlLoading" style="display: flex;flex-direction: column;height: 100%;overflow: hidden;">
				<div class="details-top" v-if="!HtmlLoading" style="padding-right: 0;">
					<div class="details-maincontainer">
						<div class="floating-layer clearfix" :class="HideInformation?'HideInformation':''"  v-cloak>
							<!--{template pc/components/image}-->
							<!--{template pc/components/right}-->
						</div>
					</div>
				</div>
			</div>
		</el-main>
	</el-container>
</div>

<script type="text/javascript">
	const { createApp, reactive, toRefs, toRef, ref, onMounted, nextTick, watch, computed, onBeforeUpdate } = Vue;
	const dzzoffice_details = createApp({
		el: '#dzzoffice',
		data() {
			return {
				path:'',
				HtmlLoading:true,
				ColorPopver: {
					base: '',
					rgb: '',
					rgba: '',
					hsl: '',
					hsv: '',
					cmyk: ''
				},
				DocumentBack:true,
				DocumentRefresh:1,
				DocumentHref:'',
				DocumentAdminId:'$_G[adminid]',
				HideInformation:false,
				IsFullScreen:false,
				imagesData: {},
				currentData:[],
				paths:[],
				selectindex:0,
				ImgParam:{
					slider:0,
					proportion:0,
					fproportion:0,
					index:0,
					LoadFirst:false,
					scaleX:0,
					scaleY:0,
					rotate:0,
					total:0,
					iswait:false
				},
				imagesSize:{
					width:0,
					height:0,
					show:false
				},
				GetParam:null,
				DocumentThemeColor:'',//dark,
				PostParam:null,
				isadmin:'$isadmin'
			}
		},
		watch: {
			path:{
				handler(val){
					if(val){
						sessionStorage.setItem('detailpath',self.path);
					}
					window.location.hash = 'path='+val;
					
				},
				deep:true,
			},
			
			'ImgParam.proportion':function(val){
				
			},
			'ImgParam.rotate':function(val){
				this.imageTransform();
			},
			'ImgParam.scaleX':function(val){
				this.imageTransform();
			},
			'ImgParam.scaleY':function(val){
				this.imageTransform();
			},
			paths:{
				handler(data){
					if(data && data.length){
						this.ImgParam.total = data.length;
						// this.ImgParam.index = data.indexOf(this.path)+1;
					}else{
						this.ImgParam.total = 1;
						// this.ImgParam.index = 1;
					}
				},
				deep:true,
				immediate:true
			},
			imagesData:{
				handler(dasta){
					var self = this;
					self.$nextTick(function(){
						if(!dasta.iniframe){
							self.imageSet();
						}
					});
				},
				deep:true,
			},
			'ImgParam.iswait':{
				handler(val){
					<!--{if $opentype=='current'}-->
					if(!val){
						this.headerCarouselArrow('right');
					}
					<!--{/if}-->
				},
				deep:true
			},
			DocumentThemeColor:{
				handler(newval){
					document.querySelector('html').className = newval
				},
				deep:true,
				// immediate:true
			}
		},
		mixins:[headerMixin,rightMixin,ImageMixin],
		created() {
			var self = this;
			axios.interceptors.response.use(function(response){
				if(response.data && response.data.isuser && parseInt(response.data.loginstatus)==0){
					self.LoginFormhash = response.data.hash;
					self.LoginVisible = true;
					return 'intercept';
				}
				return response;
			});
			let url = sessionStorage.getItem('href');
			this.DocumentHref = url;
			//主题颜色
			let theme = localStorage.getItem('theme');
			
			if(theme){
				this.DocumentThemeColor=theme;
			}else{
				this.DocumentThemeColor = 'light'
			}
			var arr = (location.hash || "").replace(/^\?/,'').split("&");
			if(arr.length){
				path=arr[0].replace("#","").split('=')[1];
				this.path = path;
			}
			if(!this.path){
				var storpath = sessionStorage.getItem('detailpath');
				if(storpath){
					this.path = storpath;
				}
			}
			var paths = sessionStorage.getItem('imgs');
			if(paths){
				this.paths = paths.split(',');
			}
			this.ImgParam.index = parseInt(sessionStorage.getItem('selectindex'))+1;
			<!--{if $opentype=='current'}-->
			if(window.parent.dzzoffice && window.parent.dzzoffice.WindowThis && window.parent.dzzoffice.WindowThis.ImageDataParam){
				var StoreImgdatas = JSON.parse(JSON.stringify(window.parent.dzzoffice.WindowThis.ImageDataParam.data));
				for(var i in StoreImgdatas){
					let data = StoreImgdatas[i];
					this.currentData.push(data);
				}
			}
			
			<!--{else}-->
			
			var imgparam = JSON.parse(sessionStorage.getItem('imgparam'));
			this.GetParam = imgparam;
			
			<!--{/if}-->	
			if(this.path){
				this.GetData();
			}else{
				self.$message.error('页面错误');
			}
		},
		
		
		methods: {
			


	


			DocumentThemeChange(){
				if(this.DocumentThemeColor=='light'){
					this.DocumentThemeColor='dark';
					localStorage.setItem('theme','dark');
				}else{
					this.DocumentThemeColor='light';
					localStorage.setItem('theme','light');
				}
			},
			async GetData(){
				var self = this;
				// self.imagesData.icondata = '';
				// self.imagesData.originalimg = '';
				self.HtmlLoading = true;
				if(self.DocumentRefresh == 1){
					self.LoginFunc = 'refresh';
				}else{
					self.LoginFunc = self.GetData;
				}
				self.DocumentRefresh ++;
				self.LoginParam = null;
				if(self.PostParam){
					self.PostParam();
				}
				var CancelToken = axios.CancelToken;

				axios.post(MOD_URL+'&operation=fetch',{
					path:self.path,
					isadmin:self.isadmin
				},{
					cancelToken: new CancelToken(function executor(c) {
					    self.PostParam = c;
					})
				}).then(function (res) {
					if(res == 'intercept'){
						return false;
					}
					var json = res.data;
					if(json.error){
						self.$confirm(json.error, '提示', {
							closeOnPressEscape:false,
							showClose:false,
							confirmButtonText: '确定',
							showCancelButton:false,
							closeOnClickModal:false,
							showConfirmButton:parseInt(json.status)==2?false:true,
							type: 'warning'
						}).then(function(){
							if(parseInt(json.status) == 2){
								// window.location.href = MOD_URL;
							}else if(parseInt(json.status) == 0){
								sessionStorage.setItem('detailpath',self.path);
								window.location.href = 'user.php?mod=login';
							}
						});          
						
						return false;
					}
					var item = json.resourcesdata;
					// if(item.opentype=='image' || item.opentype=='other'){
					// 	item['icondata'] = (item['icondata']);
					// 	item['realpath'] = (item['realpath']);
					// 	item['originalimg'] = (item['originalimg']);
					// }
					document.title = item.name+'-'+json.sitename;
					self.ImageCollect.rid = [item.rid];
					var colors = [];
					if(item.colors){
						for(var c in item.colors){
							var cstr = {
								key:c,
								val:item.colors[c]
							};
							colors.push(cstr);
						}
					}
					item.colors = colors;
					
					var tags = [];
					if(item.tag){
						for(var t in item.tag){
							var tstr = {
								key:t,
								val:item.tag[t]
							};
							tags.push(tstr);
						}
					}
					item.tag = tags;
					
					item['level'] = parseInt(item.level);
					var foldernames = [];
					if(item.foldernames){
						for(var f in item.foldernames){
							var fstr = {
								key:f,
								val:item.foldernames[f]
							};
							foldernames.push(fstr);
						}
					}
					item.foldernames = foldernames;
					self.imagesData = item;
					self.HtmlLoading = false;
					var paths = sessionStorage.getItem('imgs');
					if(paths){
						paths = paths.split(',');
						if(self.paths.length != paths.length){
							self.paths = paths;
							var imgparam = sessionStorage.getItem('imgparam');
							self.GetParam = imgparam;
						}
						
					}
					<!--{if $opentype!='current'}-->
					if(window.opener){
						window.opener.postMessage({
							dpath: self.path,
						}, window.location.origin);
						
					}else{
						if(self.GetParam && self.GetParam.ispage && (parseInt(self.ImgParam.total)-parseInt(self.ImgParam.index))<=5){
							self.GetDatafilelist();
						}
					}
					<!--{/if}-->
					self.PostParam = null;	
				}).catch(function (error) {
				    console.log(error);
				});
			},
			async GetDatafilelist(param1,param2){
				var self = this;
				if(self.GetParam && !self.GetParam.moreurl)return false;
				
				var params = JSON.parse(JSON.stringify(self.GetParam));
				delete params.ispage;
				delete params.moreurl;
				self.LoginFunc = self.GetDatafilelist;
				self.LoginParam = null;
				var res = await axios.post(self.GetParam.moreurl,params);
				if(res == 'intercept'){
					return false;
				}
				if(param2 != 'login' && parseInt(self.GetParam.page)){
					self.GetParam.page += 1;
				}
				var json = res.data.data;
				for(var i in json.data){
					self.paths.push(json.data[i].dpath);
				}
				self.GetParam.ispage = json.next;
				sessionStorage.setItem('imgparam',JSON.stringify(self.GetParam));
				sessionStorage.setItem('imgs',self.paths.join(','));
				
			},
		},
		mounted() {
			var self = this;
			if(document.body.clientWidth>992){
				this.HideInformation = false;
			}else{
				this.HideInformation = true;
			}
			window.onkeydown = function(event){ //event可以简写成 e
				var code = event.keyCode
				if(code == 37){//左边
					self.headerCarouselArrow('left')
				}else if(code == 39){//右边
					self.headerCarouselArrow('right')
				}
			}

			// $(document).on('click', '.copy-share-btn', function() {
			// 	var txt = $(this).parent().siblings('.address').text()
			// 	CopyTxt(self, txt);
			// });

			
			window.onresize = function(){
				var h = document.getElementById('ImgScroll').clientHeight;
				document.querySelector('#ImgScroll .el-scrollbar__view').style.lineHeight = h+'px';
			}

		
			//禁止鼠标右击
			document.oncontextmenu = function() {
				event.returnValue = false;
				// alert('请不要右击');
				return false;
			};
			//禁用开发者工具F12
			document.onkeydown = document.onkeyup = document.onkeypress = function(event) {
				let e = event || window.event || arguments.callee.caller.arguments[0];
				if (e && e.keyCode == 123) {
					e.returnValue = false;
					// alert('F12是不礼貌的');
					return false;
				}
			};
			<!--{if $opentype=='current'}-->
			window.addEventListener('message',function(event){
				var data = event.data.data;
				var paths = [];
				var currentData = [];
				for(var i in data){
					paths.push(data[i].dpath);
					currentData.push(data[i]);
				}
				self.paths = paths;
				self.currentData = currentData;
				self.ImgParam.iswait = false;
				self.HtmlLoading = false;
			});
			<!--{else}-->
			window.onhashchange = function(){
				if(self.DocumentBack){
					var arr = (location.hash || "").replace(/^\?/,'').split("&");
					if(arr.length){
						path=arr[0].replace("#","").split('=')[1];
						var index = self.paths.indexOf(path);
						sessionStorage.setItem('selectindex',index);
					}
					document.location.reload();
					return false;
				}
				self.DocumentBack = true;
			}
			<!--{/if}-->
		},

	});
	dzzoffice_details.use(ElementPlus, {
		locale: ElementPlusLocaleZhCn,
	});
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
		dzzoffice_details.component(key, component)
	}
	dzzoffice_details.component('comavatar', comavatar);
	dzzoffice_details.use(DzzCollectdialog);
	// 屏蔽警告信息
	dzzoffice_details.config.warnHandler = function(){return null};
	dzzoffice_details.mount('#dzzoffice');
</script>

<!--{template common/container/pc/footer}-->
